<template>
  <div>
      <!-- 搜索中心 -->
      <!-- nav-bar
        this.$router.push() : 路由的跳转
        this.$router.back() : 路由的后退
       -->
       <!--         @input="hGetSuggestion"  这个时普通的 -->
       <!--  @input="hGetSuggestion_with_fang_do" 这个时防抖的 -->
      <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()"> </van-nav-bar>
      <!-- 1.搜索区域   输入框 -->
      <van-search
        v-model.trim = 'keyword'
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @input="hGetSuggestion_with_jie_liu"
        >
        <!-- #action 等价于    slot="action" -->
        <!-- <template slot="action">
            <div @click="onSearch">搜索</div>
        </template>
         -->
         <div slot="action" @click="hSearch">搜索</div>
       </van-search>
      <!-- 2.搜索建议 -->
      <van-cell-group v-if="keyword">
        <van-cell v-for="(item,idx) in cSuggestion"
         :key="idx"
         @click="hSearchSuggestion(idx)"
         icon="search">
           <div v-html="item"></div>
         </van-cell>
      </van-cell-group>
      <!-- 3.历史记录 -->
       <van-cell-group v-else>
        <van-cell title="历史记录"/>
        <van-cell v-for="(item,idx) in history"
         :key="idx"
         :title="item"
          @click="$router.push('/search/result?keyworkd='+ item)"
         >
         <!--@click.stop  为了阻止冒泡    这是二种跳转的方式  -->
            <van-icon name="close" @click.stop="hDeleteHistory(idx)"></van-icon>
        </van-cell>
         <!-- <van-cell title="单元格">
            <van-icon name="close"></van-icon>
        </van-cell> -->
      </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { setItem, getItem } from '@/utils/storage.js'
// import _  from 'module'   这个时js库可用于防抖，和节流
// 定义一个常量，保存key
const SEARCH_HISTORY_KEY = 'ert'
export default {
  name: 'Search',
  data () {
    return {
      history: getItem(SEARCH_HISTORY_KEY) || [], // 保存搜索记录
      suggestion: [], // 当前的搜索建议
      keyword: '' // 搜索关键字
    }
  },
  computed: {
    // 用计算属性来去suggestion中保存内容做高亮
    cSuggestion () {
      const reg = new RegExp(this.keyword, 'gi')
      const arr = this.suggestion.map(str => {
        return str.replace(reg, function (s) {
          return `<span style="color:red;">${s}</span>`
        })
      })
      return arr
    }
  },
  methods: {
    //   用户点击了  删除历史记录
    hDeleteHistory (idx) {
      this.history.splice(idx, 1)
      //   保存到本地   做持久化
      setItem(SEARCH_HISTORY_KEY, this.history)
    },
    //  用来向搜索记录中添加新项
    //  1.不能有重复
    //  2.后加的在前面
    addHistory (str) {
      // 如果在history中已经存在，可以先删除
    //   findIndex如果找到了符合条件的原生，则下标不会时-1
      const idx = this.history.findIndex(item => item === str)
      if (idx !== -1) {
        //   有重复选项,删除掉
        this.history.splice(idx, 1)
      }
      // 在数组的头部去添加
      this.history.unshift(str)

      //   保存到本地   做持久化
      setItem(SEARCH_HISTORY_KEY, this.history)
    },
    // 搜索的第1中方法： 用户在搜索建议上点击了
    hSearchSuggestion (idx) {
      // console.log(idx)
      const keyword = this.suggestion[idx]
      // 1.把当前的搜索建议，添加到搜索历史记录中去
      this.addHistory(keyword)
      //   2.跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    // 搜索的第2种方法： 用户在搜索按钮上点击了
    hSearch () {
      if (this.keyword === '') {
        return
      }
      //   1.把当前的搜索内容，添加到搜索历史记录中去
      this.addHistory(this.keyword)
      //   2. 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    //   当用户输入内容变化时，就会执行
    async hGetSuggestion () {
      if (this.keyword === '') {
        this.suggestion = []
        return
      }
      // 1.调用接口
      const result = await getSuggestion(this.keyword)
      // 2.将获取的数据显示在建议区
      this.suggestion = result.data.data.options
    },
    // 当用户输入内容变化时，就会执行 ====防抖来处理
    // 防抖： 目标就是降频
    // 思路
    //  当这个函数被调用时，不是立即执行的，而是延迟10秒在执行
    // 如果打断，就要重新的计时
    // 如果没有打断，就会执行代码
    // async hGetSuggestion_with_fang_do () {
    //   // 以防抖5s为例
    //   // 用户第一次输入第一个字符，代码不会立即去执行,（ajax不会立即发出去）
    //   // 而是等5s之后再发ajax，如果在这5s内，用户输入第二个字符，在向后再延迟5s
    //   if (this.timer) {
    //     clearTimeout(this.timer)
    //   }
    //   this.timer = setTimeout(() => {
    //     this.hGetSuggestion()
    //   }, 5 * 1000)
    // },
    // 节流==============
    hGetSuggestion_with_jie_liu () {
      // 以节流5s为例 ： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 5 * 100)
    }
  }
}
</script>

<style>

</style>
